<template>
  <div class="el-header-size">
    <el-cascader
      :options="productOption2"
      v-model="productValue2"
      style="width:250px;"
      expand-trigger="hover"
      @change="productChange2"
    />
    <el-cascader
      :options="productOption3"
      v-model="productValue3"
      style="float:right;width:250px"
      expand-trigger="hover"
      @change="productChange3"
    />
  </div>
</template>

<script>
import { compareArraysEqual } from '@/utils/cinrad'
export default {
  name: 'OverlaySelect',
  props: {
    logName: {
      type: String,
      default: 'RadarSelect:'
    },
    initProductValue2: {
      type: Array,
      default: function() {
        return ['Z0000', '0', '0']
      }
    },
    initProductValue3: {
      type: Array,
      default: function() {
        return ['Z0000', '0', '0']
      }
    }
  },
  data() {
    return {
      productOption2: this.appOptions.overlayProductOption,
      productValue2: this.initProductValue2,

      productOption3: this.appOptions.overlayProductOption,
      productValue3: this.initProductValue3
    }
  },
  watch: {
    // 如果 `initProductOption` 发生改变，这个函数就会运行
    initProductValue2: function(newProduct, oldProduct) {
      console.debug(
        this.logName +
          'initProductValue2 Change:' +
          newProduct +
          ':' +
          oldProduct
      )
      if (!compareArraysEqual(newProduct, this.productValue2)) {
        this.productValue2 = newProduct
      } else {
        console.debug(
          this.logName +
            'initProductValue2 Change: newProduct===this.productValue2'
        )
      }
    },
    initProductValue3: function(newProduct, oldProduct) {
      console.debug(
        this.logName +
          'initProductValue3 Change:' +
          newProduct +
          ':' +
          oldProduct
      )
      if (!compareArraysEqual(newProduct, this.productValue3)) {
        this.productValue3 = newProduct
      } else {
        console.debug(
          this.logName +
            'initProductValue3 Change: newProduct===this.productValue2'
        )
      }
    }
  },
  methods: {
    productChange2(val) {
      console.debug(this.logName + 'productChange2:' + val)
      this.$emit('product_change2', val)
    },
    productChange3(val) {
      console.debug(this.logName + 'productChange3:' + val)
      this.$emit('product_change3', val)
    }
  }
}
</script>

<style scoped>
.el-header-size {
  height: 36px;
  width: 100%;
}
</style>
